<template>
	<view class="details">
		<image class="cellheaderimg" :src="info.img"></image>
		<view class="cell-header">
			<view class="cell-header-1">
				<view class="cell-header-title">{{info.name}}</view>
				<view class="cell-header-cennt">{{info.brief}},总共{{info.count}}道题，满分为{{info.fen}} 。</view>
			</view>
		</view>
		<view class="cell-nav">
			<view @click="urlClick('/pages/index/index',0)">数独首页</view>
			<view @click="urlClick('/pages/record/examdetails?bid='+info.id,1)">答题记录</view>
			<view @click="likeClick(1)" v-if="likeinfo">取消喜欢</view>
			<view @click="likeClick(0)" v-else>喜欢此题</view>
			<view><button class="sharebutton share"  open-type="share">分享好友</button></view>
		</view>
		<view class="rankingbag" @click="myrankingClick()">
			<view class="rankingbag-one">
				<view class="rankingbag-one-one"  v-if="myrankinghide==1" >{{rankinginfo.mingci}}</view>
				<image class="rankingbag-one-oneimgage"  v-if="myrankinghide==0"  src="../../static/icon/biyan01.png"></image>
				<view class="rankingbag-one-two">我的排名</view>
			</view>
			<view class="rankingbag-two">
				<image :src="rankinginfo.user.avatar"></image>
			</view>
			<view class="rankingbag-three">
				<view>总成绩：
					<image  v-if="myrankinghide==0"  src="../../static/icon/biyan.png"></image>
					<text  v-if="myrankinghide==1">{{rankinginfo.fen}}</text>
				分</view>
				<view>总耗时：
					<text  v-if="myrankinghide==1" >{{rankinginfo.time}}</text>
					<image v-if="myrankinghide==0" src="../../static/icon/biyan.png"></image>
				秒</view>
			</view>
			
			<image class="rankingbag-five" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/1.png"></image>
		</view>
		
		<view class="seniority">
			<view class="seniority-title">
				<view @click="rankingClick(0)" :class="rankingshow  == 0 ? 'seniority-acity' : ''">试题列表</view>
				<view @click="rankingClick(1)" :class="rankingshow  == 1 ? 'seniority-acity' : ''">考试排名</view>
			</view>
			
			<view v-if="rankingshow== 0">
				<view class="cell-list">
					<view class="suobag" v-if="!lockinfo && info.is_lock==1">
						<button class="sharebutton"  open-type="share">
							<image src="../../static/icon/suo.png"></image>
							<view>点击解锁</view>
						</button>
					</view>
					
					<view class="cell-list-view" v-for="(item,index) in questionslist">
						<view class="cell-list-view-title">【第{{index+1}}题】{{item.name}}</view>
						<view class="cell-list-view-wan w148" >分数：{{item.fen}}</view>
					</view>
				</view>
			</view>
			<view v-if="rankingshow== 1">
				<view class="cell-list">
					
					
					<view class="cell-list-view" v-for="(item,index) in rankinglist">
						<image class="rankingmingc" v-if="index == 0" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/1.png"></image>
						<image class="rankingmingc" v-if="index == 1" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/2.png"></image>
						<image class="rankingmingc" v-if="index == 2" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/3.png"></image>
						<image v-if="index > 2" :src="item.user.avatar"></image>
						
						<view class="seniority-list-view-nickname1">{{item.user.nickname}}</view>
						<view class="seniority-list-view-ringhr1">成绩：<text>{{item.fen}}</text>分</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		
		<view style="height: 300rpx;"></view>
		<view class="bottom-felx">
			<view class="sartx" @click="urlClick('/pages/exam/exam?bid='+info.id,1)">开始考试</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path:'/pages/bak/details',
				id : '',
				info : {},
				questionslist :{},
				likeinfo : {},
				lockinfo : {},
				myrankinghide : 0,
				rankinginfo    : [],
				rankinglist    : [],
				rewardedVideoAd  : '',
				rankingshow      : 0
			}
		},
		onLoad(e) {
			let that  =this;
			this.id  = e.id;
			this.page = this.page+ '&id='+e.id;
			if(wx.createRewardedVideoAd){
			    this.rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'adunit-b06519999ca4fa67' })
			    this.rewardedVideoAd.onLoad(() => {
					
			        console.log('onLoad event emit')
			    })
			    this.rewardedVideoAd.onError((err) => {
			        console.log('onError event emit', err)
			    })
			    this.rewardedVideoAd.onClose((res) => {
					this.myrankinghide  = 1;
			        console.log('onClose event emit', res)
			    })
			}
		},
		methods: {
			likeClick(e){
				let that = this;
				if(e == 0){
					var prames  = {
						'bid': this.id,
					}
					that.$like.setcollect({'data':JSON.stringify(prames)}).then(res=>{
						uni.showToast({
							title: res.msg,
							icon: "none" ,
						});
						that.likedetails();
						console.log(res);
					})
				}else{
					that.$like.setdel({'ids':that.likeinfo.id}).then(res=>{
						uni.showToast({
							title: res.msg,
							icon: "none" ,
						});
						that.likedetails();
					})
				}
				
			},
			urlClick(e,index = 0){
				if(index == 0){
					uni.switchTab({
						url : e
					})
				}else{
					uni.navigateTo({
						url:e
					})
				}
				
			},
			likedetails(){
				let that =  this;
				console.log(that.id);
				that.$like.getdetails({'bid':that.id}).then(res=>{
					that.likeinfo  = res.data.info;
				})
			},
			myrankingClick(){
				let  that=  this;
				if(that.myrankinghide ==0){
					uni.showModal({
						title: '提示',
						content: '观看广告可查看实时排名！',
						success: function (res) {
							if (res.confirm) {
								that.rewardedVideoAd.show();
							}
						},
					})
					
				}
			},
			rankingClick(e){
				this.rankingshow  = e;
			},
			getinfo(){
				let that = this;
				that.$bak.getdetails({'ids':that.id}).then(res=>{
					that.info  = res.data.info;
					uni.setNavigationBarTitle({
					    title: that.info.name
					})
				})
				that.$questions.getQuestions({'where': 'bid ='+that.id,'page':1,'limit': 100}).then(res=>{
					that.questionslist  = res.data.list;
				})
				that.$bak.getLockinfo({'bid':that.id}).then(res=>{
					that.lockinfo  = res.data.info;
					console.log(res);
				})
				that.$exam.getranking({'bid':that.id}).then(res=>{
					that.rankinglist  = res.data.list;
					console.log(res);
				})
				that.$exam.getrankinginfo({'bid':that.id}).then(res=>{
					that.rankinginfo  =res.data.info;
				})
			}
		},
		onShow() {
			
			let that = this;
			if(uni.getStorageSync("user_id")){
				that.getinfo();
				that.likedetails();
			}else{
				wx.login({
				    success(res) {
						if (res.code) {
							that.$user.login({'code':res.code}).then(res=>{
								if(res.code == 1){
									uni.setStorageSync("user_id",res.data.user_id);
								}
							})
				        } else {
							console.log('登录失败！' + res.errMsg)
						}
				    }
				});
			}
		},
		onShareAppMessage() {
			let that  =  this;
			that.$bak.setLockadd({'bid':that.id}).then(res=>{
				return {
				         title: '您的朋友向您推荐'+this.info.name,
				         path: this.path, // 路径，传递参数到指定页面。
				　　　　  imgUrl: ''     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支 
				                          // 持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				    }
			})
			
		  
		},
	}
</script>

<style lang="less">
	.details {
		width: 750rpx;
		min-height: 100vh;
		background-color: #f6f9f9;
		.cellheaderimg {
			width: 750rpx;
			height: 446rpx;
			display: block;
		}
		.cell-header {
			width: 100%;
			min-height: 200rpx;
			background-color: #fff;
			.cell-header-1 {
				padding: 20rpx;
				.cell-header-title {
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;
				}
				.cell-header-cennt {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					padding-top: 20rpx;
					margin-bottom: 20rpx;
					text-align: justify;
				}
			}
		}
		.cell-nav {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			view {
				flex: 1;
				text-align: center;
				color: #fff;
				background-color: #ed8346;
			}
			view:nth-child(2){
				background-color: #ff6c87;
			}
			view:nth-child(3){
				
				background-color: #f7522d;
			}
			view:nth-child(4){
				background-color: #7289ff;
			}
		}
		.cell-list {
			background-color: #fff;
			padding-bottom: 30rpx;
			padding-top: 30rpx;
			.cell-list-view {
				width: 690rpx;
				margin: auto;
				height: 70rpx;
				display: flex;
				padding-bottom: 22rpx;
				padding-top: 22rpx;
				border-bottom: 2rpx solid #e3e3e3;
				.cell-list-view-title {
					padding-left: 20rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					width: 470rpx;
				}
				.cell-list-view-wan {
					background: gainsboro;
					height: 54rpx;
					line-height: 54rpx;
					margin-top: 14rpx;
					padding-left: 22rpx;
					padding-right: 22rpx;
					border-radius: 10rpx;
					color: #888787;
				}
				.cheng {
					background-color: #b3ddff;
					
				}
				.cell-list-view-right {
					margin-left: auto;
					width: 52rpx;
					height: 56rpx;
					margin-top: 16rpx;
				}
			}
			.cell-list-view:last-child  {
				border: none;
			}
		}
	}
	.suobag {
		background-color: #ffffffd9;
		position: absolute;
		width: 100%;
		height: 100%;
		image {
			display: block;
			width: 120rpx;
			height: 120rpx;
			margin: auto;
			margin-top: 20%;
		}
		view {
			text-align: center;
			color: #2e77ed;
		}
	}
	.share {
		color: #fff;
		line-height: 102rpx;
	}
	.rankingbag {
		margin-bottom: 20rpx;
	}
	.w148 {
		width: 156rpx;
		text-align: center;
	}
	.bottom-felx {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0px -4px 8px 0px rgba(0,0,0,0.04);
		display: flex;
		background-color: #fff;
		.sartx {
			background-color: #7289ff;
			width: 260rpx;
			height: 100%;
			line-height: 120rpx;
			text-align: center;
			color: #fff;
			margin-left: auto;
			
		}
	}
	.seniority {
		min-height: 10vh;
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 20rpx;
		
		.seniority-title {
			padding-top: 10rpx;
			padding-left: 20rpx;
			font-size: 38rpx;
			display: flex;
			justify-content: center;
			padding-bottom: 30rpx;
			view {
				line-height: 100rpx;
				position: relative;
				flex: 1;
				text-align: center;
			}
			.seniority-acity {
				color: #7289ff;
			}
			.seniority-acity::after {
				content: ' ';
				position: absolute;
				width: 142rpx;
				height: 4rpx;
				left: 110rpx;
				border-bottom: 2rpx solid #7289ff; 
				margin-top: 92rpx;
			}
		}
	}
	.rankingmingc  {
		width: 90rpx;
		height: 90rpx;
		font-size: 42rpx;
		text-align: center;
		padding-top: 4rpx;
	}
	.seniority-list-view-nickname1 {
		flex: 3;
		font-size: 38rpx;
		padding-left: 20rpx;
		line-height: 94rpx;
	}
	.seniority-list-view-ringhr1 {
		line-height: 94rpx;
		font-size: 38rpx;
		text {
			color: #ff6910;
			padding-left: 8rpx;
			padding-right: 12rpx;
			font-size: 42rpx;
		}
	}
</style>